<template>
    <el-select v-model="model">
        <el-option v-for="(option, index) in options" :value="option.value" :label="option.label" :key="index">
            <span>{{option.label}}</span>
        </el-option>
    </el-select>
</template>
<script>
export default {
    name: 'monthselect',
    props: {
        value: {
            type: String,
            default () {
                return "";
            }
        }
    },
    data() {
        return {
            model: '',
            options: [{ "value": "1", "label": "1" }, { "value": "2", "label": "2" }, { "value": "3", "label": "3" }, { "value": "4", "label": "4" }, { "value": "5", "label": "5" }, { "value": "6", "label": "6" }, { "value": "7", "label": "7" }, { "value": "8", "label": "8" }, { "value": "9", "label": "9" }, { "value": "10", "label": "10" }, { "value": "11", "label": "11" }, { "value": "12", "label": "12" }]
        }
    },
    watch: {
        model(val) {
            this.$emit('input', val);
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (!this.value || this.value === "") {
                let date = new Date();
                this.model = date.getMonth() + 1 + "";
            } else {
                this.model = this.value;
            }
        });
    },
    methods: {

    }
}
</script>